<template>
<div class="container" :style="bg__styles">
		<div class="login__box" :style="card__styles">
			<div class="logo">
				<p style="font-size: 30px;color: #6853da;"> Viewdance </p>
				<p>后台管理系统</p>
			</div>
			<div class="box__left">
				<h1>登录</h1>
				<el-input
						size="normal"
						placeholder="请输入用户名"
						prefix-icon="el-icon-user"
						v-model="loginForm.username" clearable>
				</el-input>
				<el-input
						size="normal"
						placeholder="请输入密码"
						prefix-icon="el-icon-lock"
						type="password"
						@keyup.enter.native="login"
						v-model="loginForm.password">
				</el-input>
				<div class="forget">
<!--					<router-link to="/forwardPassword"><span>忘记密码？</span></router-link>-->
				</div>
				<el-button type="primary" size="normal" @click="login" round>登录</el-button>
			</div>
			<div class="box__right">
				<img src="@/assets/img/login_insert.png" alt="login_insert.png">
			</div>
		</div>
	<div class="footer">
		<p> 最佳浏览体验：chrome v23.0.1271.64 以上版本 或 firefox v22.0 以上版本 </p>
		<p style="font-weight: bold">Copyright © 2020-2021 Viewdance 出品 All rights reserved.</p>
	</div>
</div>
</template>

<script>
import bgImg from '../../assets/img/login_bg.png'
import loginCard from '../../assets/img/login_card.png'
export default {
	name: "login",
	created() {
		// console.log(this.$store.state)
	},
	data(){
		return{
			bg__styles:{
				backgroundImage:`url(${bgImg})`
			},
			card__styles:{
				backgroundImage: `url(${loginCard})`
			},
			loginForm:{
				username:'',
				password:''
			}
		}
	},
	methods:{
		 async login(){
		 	// if(this.verify()){
			 //   await this.$Http.login(this.$qs.stringify({
			 // 	  userName:this.loginForm.username,
			 // 	  pwd:this.loginForm.password
			 //   })).then(res =>{
			 // 	  this.$Http.getMyInfo().then(res =>{
			 // 		  this.$store.commit('setUserData' ,res.data )
			 // 	  })
			 // 	  if (res.code === 'SUCCESS'){
			 // 		  this.$message({
			 // 			  message:"登录成功",
			 // 			  type:'success'
			 // 		  });
			 // 		  this.$router.push('/home');
			 // 	  }else{
			 // 		  this.$message({
			 // 			  message:res.message,
			 // 			  type:"error"
			 // 		  })
			 // 	  }
			 //   })
			 // }
			 if(this.verify()){
			 	  if(this.loginForm.username === 'admin' && this.loginForm.password === '123456'){
				    this.$message({
					    			  message:"登录成功",
					    			  type:'success'
					    		  });
					    		  this.$router.push('/home');
			    }else {
				    this.$message({
					    			  message:'密码错误!' ,
					    			  type:"error"
					    		  })
			    }
			 }
		},
		// 校验
		verify(){
			if(this.loginForm.username === ''){
				this.$message.error("用户名不能为空！");
				return false;
			}else if(this.loginForm.password === ''){
				this.$message.error("密码不能为空！");
				return false;
			} else{
				return true;
			}
		},
	}
}
</script>

<style scoped lang="scss">
	.container{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		.footer{
			position: absolute;
			bottom: 1%;
			p{
				color: #666666;
				font-size: 15px;
			}
		}
		.login__box{
			min-width: 750px;
			width: 60%;
			min-height: 450px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain; // 把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。
			padding: 40px 80px;
			position: relative;
			display: flex;
			.logo{
				display: flex;
				align-items: center;
				position: absolute;
				top: 6%;
				left: 10%;
				p{
					line-height: 40px;
					font-weight: bold;
				}
			}
			.box__left{
				margin-left: 11%;
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				h1{
					font-size: 30px;
					letter-spacing: 20px;
					margin-bottom: 30px;
				}
				.el-input{
					margin-top:20px;
					width: 90%;
				}
				.forget{
					height: 20px;
					width: 100%;
					margin-top: 10px;
					position: relative;
					span{
						color: #7ABBFF;
						position: absolute;
						font-size: 15px;
						right: 4%;
					}
				}
				.el-button{
					margin-top: 25px;
					width: 60%;
				}
			}
			.box__right{
				padding-right: 140px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				img{
					width: 100%;
				}
			}
		}
	}
</style>
